<template>
  <div class="header">
    <a href="">
      <img class="layout-logo" src="../../assets/logo.png" alt="" />
      <span class="layout-title">梦学谷会员管理系统</span>
    </a>
    <el-dropdown @command="goBackClick">
      <span class="el-dropdown-link">
        {{username}}<i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="goback">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import store from '../../store/index'
import userApi from '../../api/user'
export default {
  data() {
    return {
      username: '',
    };
  },
  mounted() {
    this.username = store.state.userInfo.name
    // console.log(store.state.userInfo);
  },
  methods: {
    goBackClick(val) {
      switch (val) {
        case 'pwd' :
          console.log('修改密码');
          break;
        case 'goback' :
          this.goback();
          break;
      }
    },
    goback() {
      this.$store.dispatch('goback').then(response=>{
        if(response.data.flag){
          this.$router.push('/login')
          this.$message.success(response.data.message)
        }else{
          this.$message.error(response.data.message)
        }
      })
    }
  },
};
</script>

<style scoped >
.layout-logo{
    width: 25px;
    height: 25px;
    vertical-align: middle;
    padding-right: 20px;
}
.layout-title{
    color: #fff;
    vertical-align: middle;
    font-size: 16px;
}
.el-dropdown{
    float: right;
    color: #fff;
}
</style>
